<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>后台管理系统</title>
    <style>
        .el-date-picker__editor-wrap{display: none;}
        .el-date-picker__time-header{display: none;}
        .el-picker-panel__link-btn.el-button--text{display: none;}
    </style>
</head>
<body>
<div id="maindiv" class="maindiv mainPadding" style="display: none;">    
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        <el-breadcrumb-item>电销顾问跟踪表</el-breadcrumb-item>
    </el-breadcrumb>    
    <el-row class="marginB20">
        <el-button type="primary" @click="searchYesterday">昨天</el-button>
        <el-button type="success" @click="searchWeek">近七天</el-button>
        <el-button type="warning" @click="searchMonth">本月</el-button>
        <shiro:hasPermission name="statistics:telemarketingFollow:export">
        <el-button type="danger" @click="exportRs">导出Excel报表</el-button>
        </shiro:hasPermission>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
           <el-form :inline="true" :model="form" class="demo-form-inline mainSearchForm" ref="form">                 
                <el-form-item label="起止时间:">
                    <el-date-picker format="yyyy-MM-dd HH:mm" v-model="form.startTime" type="datetime" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                   <el-date-picker format="yyyy-MM-dd HH:mm" v-model="form.endTime" type="datetime" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker>
                </el-form-item>
                <el-form-item label="电销组:">  
                    <el-select v-model="form.orgId" placeholder="电销组" style="width: 100%;" clearable filterable :disabled="isDisabled">
                        <el-option
                            v-for="item in orgTeleArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户级别:">  
                    <el-select v-model="form.cusLevelList" placeholder="客户级别" style="width: 100%;" clearable filterable multiple>
                        <el-option
                            v-for="item in clientRank"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable(1)" class="searchBtn" :disabled="btnDisabled">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <!-- <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span> -->
                </div>  
            </el-form>
        </div>
        <el-row>
            <el-table 
                ref="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="tableData"
                v-loading="loading"
                :cell-style="centerStyle"
                :header-cell-style="centerStyle"
                :span-method="arraySpanMethod">
                <el-table-column type="index" label="序号" align="center" width="55" :index="indexFun"></el-table-column>
                <el-table-column prop="orgName" label="电销组">
                    <template slot-scope="scope">
                        <el-button @click="gotoTeam(scope.row)" type="text" size="small">{{scope.row.orgName}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="cusLevel" label="客户级别" width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.cusLevel == 1">VIP</div>
                        <div v-else-if="scope.row.cusLevel ==2">重要</div>
                        <div v-else-if="scope.row.cusLevel ==3">普通</div>
                        <div v-else></div>
                    </template>
                </el-table-column>
                <el-table-column prop="countResource" label="资源数" width="80"></el-table-column>
                <el-table-column prop="countClueId" label="回访次数" width="90"></el-table-column>
                <el-table-column prop="countDistinctClue" label="回访资源数" width="100"></el-table-column>
                <el-table-column prop="dayOfPer" label="人均天回访次数" :formatter="numFormat" width="120"></el-table-column>
            </el-table>
            <table-pagination :pager="pager" @change="searchTable()"></table-pagination>
        </el-row>
    </div>
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
    var orgIdList=[[${saleGroupList}]];//电销组
    var clientRankIdList=[[${cusLevelListArray}]];//客户级别
    // console.log(clientRankIdList)
    var curOrgId = [[${curOrgId}]];//当前电销组
    var mainDivVM = new Vue({
        el: '#maindiv',
        data: function() {
            return {
                loading:false,
                isDisabled:false,
                btnDisabled:false,
                form: {
                    startTime:'',
                    endTime:'',
                    orgId:curOrgId,
                    cusLevelList:[],
                },
                export: {
                    startTime:'',
                    endTime:'',
                    orgId:curOrgId,
                    cusLevelList:[],
                },
                tableData: [],
                orgTeleArr:orgIdList,//电销组
                clientRank:clientRankIdList,//客户级别
                pager:{
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
                pickerOptions0: {
                  disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
                  }
                },
            }             
        },
        methods: {    
            centerStyle(){
                return "text-align:center"
            },  
            searchTable(pageNumOne) {   
                var startTime=this.form.startTime;
                var endTime=this.form.endTime;
                if(endTime && startTime){
                    startTime = new Date(this.form.startTime);
                    endTime = new Date(this.form.endTime);
                    if(startTime>endTime){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                        });
                        return;
                    }
                    var date = new Date();
                    var currentDate = moment(date).format("YYYY-MM-DD 23:59");
                    date.setMonth(date.getMonth()-6);
                    var beforeSixMonth = moment(date).format("YYYY-MM-DD 00:00");
                    var currentDateRes = new Date(currentDate);
                    var beforeSixMonthRes = new Date(beforeSixMonth);
                    if(new Date(startTime) < beforeSixMonthRes || new Date(endTime) > currentDateRes){
                        this.$message({
                            message: '请选择近6个月内的时间',
                            type: 'warning'
                        });
                        return;
                    }
                    startTime = this.limitTime(startTime, null);
                    endTime = this.limitTime(null, endTime);
                }else{
                    this.$message({
                        message: '请选择起止时间',
                        type: 'warning'
                    });
                    return;
                }
                var param = {};
                param.pageSize = this.pager.pageSize;
                // param.pageNum =  this.pager.currentPage;
                if(pageNumOne){
                    param.pageNum = pageNumOne;
                }else{
                    param.pageNum = this.pager.currentPage;
                }
                // 搜索条件
                param.startTime = this.minuteFormat(startTime);
                param.endTime = this.minuteFormat(endTime);
                param.orgId = this.form.orgId;//电销组
                param.cusLevelList = this.form.cusLevelList;//客户级别
                
                this.loading=true;
                this.btnDisabled=true; 
                axios.post('/statistics/teleStatement/getRecordByGroupPageOne',param).then(function (response) { 
                    if(!response){
                        mainDivVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        mainDivVM.btnDisabled=false; 
                        return ;
                    }
                    var resobj= response.data;
                    if(!resobj){
                        mainDivVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        mainDivVM.btnDisabled=false; 
                        return ;
                    }
                    if(resobj.code!='0'){
                        mainDivVM.$message({
                            message: resobj.msg,
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        mainDivVM.btnDisabled=false; 
                        return ;
                    }  
                    var resobjData=resobj.data.data;                    
                    // 表格数据渲染
                    mainDivVM.tableData=resobjData;
                    // 分页
                    mainDivVM.pager.currentPage= resobj.data.currentPage;
                    mainDivVM.pager.total= resobj.data.total;
                    // 插入合计一行
                    if(resobjData.length>0){
                        mainDivVM.summaryFun(param);
                    }else{
                        // loading
                        mainDivVM.loading=false;
                    }   
                    mainDivVM.btnDisabled=false;//按钮可点
                    // 给导出参数赋值
                    mainDivVM.export.startTime = mainDivVM.minuteFormat(startTime);
                    mainDivVM.export.endTime = mainDivVM.minuteFormat(endTime);
                    mainDivVM.export.orgId = mainDivVM.form.orgId;
                    mainDivVM.export.cusLevelList = mainDivVM.form.cusLevelList;
                })
            },
            gotoTeam(item){
                var orgName = item.orgName;
                var orgId = item.orgId;
                // 搜索条件
                var startTime=this.export.startTime;
                var endTime=this.export.endTime;
                var cusLevelList=this.export.cusLevelList;
                var strCusLevelList="";
                if(cusLevelList!=0){
                    strCusLevelList=cusLevelList.join(",");
                }else{
                    strCusLevelList=""
                }  
                if(orgName == "合计"){
                    // 点击组跳转到合计
                    // window.location.href="/statistics/teleStatement/telemarketingFollowTableSum?orgId=" + this.form.orgId+"&startTime="+ startTime+"&endTime="+ endTime+"&strCusLevelList="+ strCusLevelList;
                }else{
                    // 点击组跳转到组个人
                    window.location.href="/statistics/teleStatement/telemarketingFollowTableTeam?orgId=" + orgId+"&startTime="+ startTime+"&endTime="+ endTime+"&strCusLevelList="+ strCusLevelList;
                }
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并第一行
                // if (rowIndex === 0) {
                //     if (columnIndex === 0) {
                //         return [0, 0];
                //     } else if (columnIndex === 1) {
                //         return [1, 2];
                //     }
                // }
                if (rowIndex === 0) {
                    if (columnIndex === 0) {
                        return [0, 0];
                    } else if (columnIndex === 1) {
                        return [1, 3];
                    }  else if (columnIndex === 2) {
                        return [0, 0];
                    } 
                }
            },
            indexFun (index) { // 表格序号
                return index;
            },
            summaryFun (param) { // 将合计插入数据中：如果是分页，记得每次获取数据都要执行这个函数
                // const { columns, data } = param;
                // const sums = ["合计", '', 2, 2, '2%', 2, 2, '2%', 1234, 1234];
                // var resTotalList = {
                //     orgName: '合计',
                //     cusLevel: '2',
                //     countResource: '4',
                //     countClueId: '6',
                //     countDistinctClue: '8',
                //     dayOfPer: '10',
                // };
                mainDivVM.loading=true;
                axios.post('/statistics/teleStatement/getRecordByGroupPageOneCount',param).then(function (response) {
                    if(!response){
                        mainDivVM.$message({
                            message: "合计接口调用失败",
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        return ;
                    }
                    var resobj= response.data;
                    if(!resobj){
                        mainDivVM.$message({
                            message: "合计接口调用失败",
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        return ;
                    }
                    if(resobj.code!='0'){
                        mainDivVM.$message({
                            message: "合计接口调用失败",
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        return ;
                    }  
                    var resobjData=resobj.data;
                    // 插入合计一行
                    mainDivVM.tableData.unshift(resobjData[0]); 
                    // mainDivVM.tableData.unshift(resTotalList); 
                    // loading
                    mainDivVM.loading=false;                   
                })
                
                // const sums = [];
                // columns.forEach((column, index) => {
                //     if (index === 0) {
                //         sums[index] = '合计';
                //         return;
                //     }
                //     if (index === 1) {
                //         sums[index] = '';
                //         return;
                //     }
                //     const values = data.map(item => Number(item[column.property]));
                //     if (!values.every(value => isNaN(value))) {
                //         sums[index] = values.reduce((prev, curr) => {
                //             const value = Number(curr);
                //             if (!isNaN(value)) {
                //                 return prev + curr;
                //             } 
                //         }, 0);
                //     }
                // });
                // sums[sums.length-2] = this.timeFun (sums[sums.length-2]);
                // sums[sums.length-1] = this.timeFun (sums[sums.length-1]);
                // return sums;
            },
            numFormat(row, column){
                var percent = row[column.property];
                if(percent){
                    percent = Math.floor(percent * 100) / 100;
                }
                return percent;
            },
            minuteFormat (m) {
                if (!m) {
                   return "";
                 }
                return moment(m).format("YYYYMMDDHHmm");
            },
            limitTime (start, end) {
                var startTime = this.minuteFormat (start);
                var endTime = this.minuteFormat (end);
                var date = new Date();
                data = this.minuteFormat (date);// 现在的时间
                data = data.slice(0,8);
                if(startTime){
                    var s = startTime.slice(0,8);
                    if(s < data){
                        this.form.startTime = moment(start).format("YYYY-MM-DD 00:00");
                        return this.form.startTime;
                    }
                    return start;
                }
                if(endTime){
                    var e = endTime.slice(0,8);
                    if(e < data){
                        this.form.endTime = moment(end).format("YYYY-MM-DD 23:59");
                        return this.form.endTime;                        
                    }
                    return end;
                }
            },
            searchYesterday(){//昨天
                var today = new Date();
               today.setTime(today.getTime()-24*60*60*1000);
               var startTime = today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate()+" 00:00";
               var endTime =today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate()+" 23:59";
               this.form.startTime=startTime;
               this.form.endTime=endTime;
               this.searchTable(1);
            },
            searchWeek(){//近七天
                 var a = new Date();
                 var year = a.getFullYear();
                 var month = a.getMonth();
                 var date = a.getDate();
                 var b = new Date(year,month,date);
                 var c = b.valueOf()-6*24*60*60*1000;
                // var d = b.valueOf()+1*24*60*60*1000;
                 var d = b.valueOf();
                 var startTime= new Date(c);
                 var endTime = new Date(d);
                 this.form.startTime=startTime.getFullYear()+"-" + (startTime.getMonth()+1) + "-" + startTime.getDate()+" 00:00";
                 this.form.endTime=endTime.getFullYear()+"-" + (endTime.getMonth()+1) + "-" + endTime.getDate()+" 23:59";
                 this.searchTable(1);
            },
            searchMonth(){//本月
                var a = new Date();
                var year = a.getFullYear();
                var month = a.getMonth();
                var date = a.getDate();
                var b = new Date(year,month,date);
                var f= new Date(year,month,01);
                var c = f.valueOf();
              //  var d = b.valueOf()+1*24*60*60*1000;
                var startTime= new Date(c);
               // var endTime = new Date(d);
                this.form.startTime=startTime.getFullYear()+"-" + (startTime.getMonth()+1) + "-" + startTime.getDate()+" 00:00";;
                this.form.endTime=year+"-"+(month+1)+"-"+date+" 23:59";
                this.searchTable(1);
            },
            exportRs(){
                var param = {};
                // 搜索条件
                param.startTime = this.export.startTime;
                param.endTime =  this.export.endTime;
                param.orgId =  this.export.orgId;//电销组
                param.cusLevelList =  this.export.cusLevelList;//客户级别
                axios.post('/statistics/teleStatement/exportRecordByGroupPageOne',param,{responseType:'blob'})
                .then(function (response) {
                    var data =  response.data;
                    var fileName = response.headers.filename;
                    saveAs(data,decodeURI(fileName));
                })
                .catch(function (error) {
                    console.log(error);
                }).then(function(){
                });
            }
        },
        created(){     
            // 默认进入显示当天时间
            var today = new Date();
            today.setTime(today.getTime());
            var startTime = today.getFullYear()+"-"+ (today.getMonth()+1) + "-" + today.getDate()+" 00:00";
            var endTime =today.getFullYear()+"-"+ (today.getMonth()+1) + "-" + today.getDate()+" 23:59";
            this.form.startTime=startTime;
            this.form.endTime=endTime;  

            if(curOrgId){this.isDisabled= true;}
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            this.searchTable();
        },
        mounted(){
            document.getElementById('maindiv').style.display = 'block';
        }
    })
    
</script>
</html>